
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jquery-Viewer</title>
	<link rel="stylesheet" href="css/viewer.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/viewer-jquery.min.js"></script>
</head>
<body>
	<!-- 单张图片 -->
	<div>
	  <img id="image" data-original="img/thumbnails/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1">
	</div>

	<!-- 多张图片 -->
	<ul id="viewer">
	    <li><img data-original="img/thumbnails/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
	    <li><img data-original="img/thumbnails/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
	    <li><img data-original="img/thumbnails/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
	    <li><img data-original="img/thumbnails/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
	    <li><img data-original="img/thumbnails/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
	    <li><img data-original="img/thumbnails/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
	</ul>

	<script type="text/javascript">
		<!--调用viewer函数即可-->
		$('#image').viewer({
   			url: 'data-original',
			title: false, 
			show: function(){
				alert("show");
			}
		});

		// 用法实例
		$('#viewer').viewer({
		    url: 'data-original',
			title: false, 
			interval: 1000,
			show: function(){
				alert("show");
			}
		});
	</script>
</body>
</html>